<template>
  <view class="component product">
    <view class="product-info">
      <view class="img-area"><image class="img" :src="data.imgurl"></image></view>
      <view class="info">
        <view class="title">{{ data.title }}</view>
        <view class="desc-item" v-for="dItem in data.desc" :key="dItem.label">
          <view class="desc-label">{{ dItem.label }}</view>
          <view class="desc-content">{{ dItem.text }}</view>
        </view>
        <view class="info-ft m-t--m">
          <view
            class="ui-tag tag-style--orange"
            v-for="tItem in data.tags"
            :key="tItem.label"
            >{{ tItem.label }}</view
          >
          <view class="operate-area" v-if="type !== 'view'">
            <view class="operate--edit"
              v-if="type === 'edit'"
              ><text class="text">{{ data.total }}</text>
              
              <view class="iconfont icon-a-44_44_fill_edit" @tap="handleEdit"></view>
              </view
            >
            <view class="operate--add"
              v-if="type === 'add'"
            >
              <view class="iconfont icon-a-44_44_fill_add" @tap="handleAdd"></view>
            </view>
            <view class="operate--input" v-if="type === 'input'">
              <view class="ui-button button-style--primary" @tap="handleInput">录串号</view>
            </view>
            <view class="operate--input" v-if="type === 'checkbox'">
              <view class="up-checkbox-cover">
                 <up-checkbox
                   :customStyle="{marginBottom: '8rpx'}"
                   label=""
                   shape="circle"
                   name="agree"
                   usedAlone
                   v-model:checked="aloneChecked"
                   @change="handleCheckbox"
                 >
                 </up-checkbox>
               </view>
            </view>

            <view class="operate--custom" v-if="type === 'custom'">
              <slot name="operate" :data="data">自定义操作</slot>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script name="ProductInfo" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  type: {
    type: String, // view 展示
    default: ''
  }
});

const data = ref({
  imgurl: 'http://192.168.0.37:90/assets/profile-841bccec.jpg',

  title: '华为P70',
  desc: [
    {
      label: '商品编号',
      text: 'HUA628929292'
    }
  ],
  tags:[
    {
      label: '128g 白色',
    }
  ],
  operateType: props.type, // boolean
  status: '2',
  total: 10,
});

const injectOperateFn = inject('operate');

const emit = defineEmits(['edit', 'add', 'input'])

// 编辑
const handleEdit = () => {
  console.log('handleEdit')
  emit('onEdit')
}

// 新增
const handleAdd = (data) => {
  console.log('handleAdd')
  emit('onAdd', data)
}

// 录入
const handleInput = () => {
  console.log('handleInput')
  emit('onInput')
}

// 多选
const handleCheckbox = () => {
  console.log('handleCheckbox')
  emit('onCheckbox')
}

watch(() => props.data, (newVal) => {
  if (newVal) {
    data.value = newVal;
  }
});

</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.product {
  &-info {
    display: flex;
    gap: 24rpx;
  }
  .img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    &-area {
      width: 120rpx;
      height: 120rpx;
      border-radius: $border-radius;
      border: 2rpx solid $border-color;
    }
  }
  
  .info {
    flex: 1;
    .title {
      font-size: 29rpx;
      line-height: 40rpx;
      margin-bottom: 8rpx;
    }
    .desc-item {
      font-size: 24rpx;;
      line-height: 32rpx;
      display: flex;
      color: $text-l3-color;
    }
    &-ft {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44rpx;
    }

    .operate {
      &--edit {
        display: flex;
        align-items: center;
        gap: 12rpx;

        .iconfont {color: $decorate-color;}
      }
    }

  }
}
</style>
